<template>
  <div class="window-drag-bar">
    <div class="window-controls">
      <div class="window-title__button is-close" @click="handleClose">
        <i class="el-icon-close"/>
      </div>
      <div class="window-title__button is-minimize" @click="handleMinus">
        <i class="el-icon-minus"/>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'element-ui'
import { ipcRenderer } from 'electron'

export default {
  components: {
    Icon
  },
  methods: {
    handleClose () {
      window.top.close()
      ipcRenderer.send('hide')
    },

    handleMinus () {
      ipcRenderer.send('minimize')
    }
  }
}
</script>

<style lang="scss">
$close-color: rgb(252, 73, 72);
$minimize-color: rgb(253, 179, 37);
.window-drag-bar {
  display: flex;
  height: 30px;
  align-items: center;
  padding-left: 12px;
  -webkit-app-region: drag;
}

.window-controls {
  display: flex;
  position: relative;
  z-index: 100;
  -webkit-app-region: no-drag;

  &:hover {
    .window-title__button i {
      visibility: visible;
    }
  }
}

.window-title__button {
  height: 12px;
  width: 12px;
  border-radius: 100%;
  margin-right: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  i {
    transform: scale(0.7);
    visibility: hidden;
  }

  &.is-close {
    background-color: $close-color;
    border-color: darken($close-color, 10);
  }

  &.is-minimize {
    background-color: $minimize-color;
    border-color: darken($minimize-color, 10);
  }
}
</style>